//css
import "./slider.css";
import "../carousel/btn.css";

//引入数据
import { ICOD } from "../../../../api/config.js";
import { getData } from "../../../../api/getData.js";
import render from "./slider.art";
import Slider from "./module/index";

//获取数据
const sliderPanel = document.querySelector("#slider-layout");
const url = `https://www.imooc.com/api/mall-PC/index/slider?icode=${ICOD}`;
getData(url)
  .then((res) => {
    const html = render({ data: res });
    sliderPanel.innerHTML = html;

    const slider = new Slider(document.querySelector(".slider"), {
      initialIndex: 0,
      animation: true,
      // 切换速度，单位 ms
      speed: 300,
      // 自动切换，单位 ms
      autoplay: 1000,
    });

    const leftBtn = document.querySelector("#leftbtn");
    const rightBtn = document.querySelector("#rightbtn");
    const banner = document.querySelector("#banner");

    leftBtn.addEventListener(
      "click",
      () => {
        slider.prev();
      },
      false
    );

    rightBtn.addEventListener(
      "click",
      () => {
        slider.next();
      },
      false
    );

    banner.addEventListener(
      "mouseenter",
      () => {
        slider.pause();
      },
      false
    );

    banner.addEventListener(
      "mouseleave",
      () => {
        slider.autoPlay();
      },
      false
    );
  })
  .catch((err) => console.log(err));
